<template>
  <div>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column
        fixed
        prop="cid"
        label="课程号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="课程名"
        width="150">
      </el-table-column>
      <el-table-column
        fixed
        prop="sid"
        label="学号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="sname"
        label="学生名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="grade"
        label="成绩"
        width="100">
      </el-table-column>
      <el-table-column
        prop="term"
        label="学期"
        width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="editor(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p>
      平均成绩：{{ avg }}
    </p>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    select (row) {
      console.log(row)
    },
    changePage (page) {
      page = page - 1
      const that = this
      let start = page * that.pageSize, end = that.pageSize * (page + 1)
      let length = that.tmpList.length
      let ans = (end < length) ? end : length
      that.tableData = that.tmpList.slice(start, ans)
    },
    editor (row) {
      this.$router.push({
        path: '/editorGradeCourse',
        query: {
          cid: row.cid,
          tid: row.tid,
          sid: row.sid,
          term: row.term
        }
      })
    }
  },
  data () {
    return {
      tableData: null,
      pageSize: 10,
      total: null,
      tmpList: null,
    }
  },
  created () {
    const that = this
    axios.get('http://localhost:9000/SCT/getSCTInfo').then(function (resp) {
      that.tmpList = resp.data
      that.total = resp.data.length
      let start = 0, end = that.pageSize
      let length = that.tmpList.length
      let ans = (end < length) ? end : length
      that.tableData = that.tmpList.slice(start, ans)
    })
  },
  computed: {
    avg () {
      const that = this
      return that.tmpList.reduce((pre, cur) => pre + cur.grade, 0) / that.total
    },
  }
}
</script>
